<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
    数组 方法   reduce  使用场景  ：   数据叠加 
    1 数字求和 
    2 字符串拼接   ['a','b','c']  <a>a</a><a>b</a><a>c</a>
    
     */

     const list = [10,20,30]
     //  reduce 返回 叠加后的结果
      // const result = list.reduce(回调函数, 初始值);
      // const result = list.reduce((叠加后的数据,数组中的项)=>{
      // const result = list.reduce((s,v)=>{
      //   // 第一次执行   s = 0 ,  v = 10
      //   // 第二次执行   s = 10,  v = 20
      //   // 第三次执行   s = 30,  v = 30
      //   s+=v;
      //   let a=s+1;
      //   let a2=s+1;
      //   let a3=s+1;
      //   // 一定要return 计算后的值    第一次return了什么  第二次的s 就等于 第一次return的值
      // },0); 
    //   const res = list.reduce((s,v)=>{
    //     return s+=v
    //   })
    //   因为大括号里面只有一行代码，所以可以简写（可以省略花括号、可以省略return）
        const res = list.reduce((s,v)=>s+v,0)
      console.log(res);

    //   字符串拼接
    const arr = ['a', 'b', 'c'];
    const html = arr.reduce((s,v)=>{
        s + `<li>${v}</li>`;
        // 记得一定要写return 否则会返回undefined
        return s + `<li>${v}</li>`
    },'')
    console.log(html);
    </script>
</body>
</html>